<template>
<div id="bd_zhb">
    <bd></bd>
    <div class="bd_zhb2">
        <ul>
      <li v-for="(item) in bd_zhbList" :key="item.cate_id">
        <img :src="item.hcover" alt="">
        <div class="bd_zhb3">
        <p class="p1">{{item.name}}</p>
        <img src="../assets/ink.png" alt="">
        <p class="p2">{{item.sina_nickname}}</p>
        </div>
        <div class="phz">
        <i>{{item.rank_no}}</i>
        </div>
        </li>
        </ul>
    </div>
</div>
</template>

<script>

import bd from '../components/bd.vue';

export default {
    components:{
        bd
    },
    data() {
        return {
            bd_zhbList:[]
        }
    },
    created() {
        this.$axios.get('rank?_type=h5').then((res) => {
            console.log(res.data);
            this.bd_zhbList = res.data.data.week;
        })
    }
}
</script>

<style>
body{
    background-color: #fff;
}
.bd_zhb2 ul li{
    position: relative;
}
.bd_zhb2 img{
    width: 7.625rem /* 122/16 */;
    height: 4.3125rem /* 69/16 */;
    margin: .5rem /* 8/16 */ .9375rem /* 15/16 */;
}
.bd_zhb3{
    width: 9.75rem /* 156/16 */;
    height: 4.25rem /* 68/16 */;
    /* border: 1px solid black; */
    margin-left: 9.0625rem /* 145/16 */;
    margin-top: -5rem /* 80/16 */;
    position: relative;
}
.bd_zhb3 img{
    width: 1rem /* 16/16 */;
    height: 1rem /* 16/16 */;
    position: absolute;
    top: 2.25rem /* 36/16 */;
    left: -1rem /* 16/16 */;
}
.bd_zhb3 .p1{
    font-size: .875rem /* 14/16 */;
    color: #333;
}
.bd_zhb3 .p2{
    width: 6.875rem /* 110/16 */;
    /* border: 1px solid pink; */
    font-size: 0.75rem /* 14/16 */;
    margin-top: 1.875rem /* 30/16 */;
    margin-left: .9375rem /* 15/16 */;
}
.phz i{
    /* border: 1px solid violet; */
    position: absolute;
    top: 1.875rem /* 30/16 */;
    left: 21.5625rem /* 345/16 */;
}
</style>